---
title: Camera (Next)
description: A React component that renders a preview for the device's front or back camera.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-camera'
packageName: 'expo-camera'
iconUrl: '/static/images/packages/expo-camera.png'
---

import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import PlatformsSection from '~/components/plugins/PlatformsSection';
import { AndroidPermissions, IOSPermissions } from '~/components/plugins/permissions';
import {
  ConfigReactNative,
  ConfigPluginExample,
  ConfigPluginProperties,
} from '~/ui/components/ConfigSection';
import PrereleaseNotice from '~/ui/components/PrereleaseNotice';

<PrereleaseNotice>
  This page documents an upcoming version of the Camera library. **To try it, switch to
  `expo-camera/next` imports in your code.**
</PrereleaseNotice>

`expo-camera` provides a React component that renders a preview of the device's front or back camera. The camera's parameters such as zoom, torch, and flash mode are adjustable. Using `CameraView`, you can take photos and record videos that are saved to the app's cache. The component is also capable of detecting bar codes appearing in the preview. Run the [example](#usage) on your device to see all these features working together.

<PlatformsSection android ios web />

## Installation

<APIInstallSection />

## Configuration in app.json/app.config.js

You can configure `expo-camera` using its built-in [config plugin](/config-plugins/introduction/) if you use config plugins in your project ([EAS Build](/build/introduction) or `npx expo run:[android|ios]`). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect.

<ConfigPluginExample>

```json app.json
{
  "expo": {
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
          "recordAudioAndroid": true
        }
      ]
    ]
  }
}
```

</ConfigPluginExample>

<ConfigPluginProperties
  properties={[
    {
      name: 'cameraPermission',
      platform: 'ios',
      description: 'A string to set the [`NSCameraUsageDescription`](#ios) permission message.',
      default: '"Allow $(PRODUCT_NAME) to access your camera"',
    },
    {
      name: 'microphonePermission',
      platform: 'ios',
      description: 'A string to set the [`NSMicrophoneUsageDescription`](#ios) permission message.',
      default: '"Allow $(PRODUCT_NAME) to access your microphone"',
    },
    {
      name: 'recordAudioAndroid',
      platform: 'android',
      description:
        'A boolean that determines whether to enable the `RECORD_AUDIO` permission on Android.',
      default: 'true',
    },
  ]}
/>

<ConfigReactNative>

Learn how to configure the native projects in the [installation instructions in the `expo-camera` repository](https://github.com/expo/expo/tree/main/packages/expo-camera#installation-in-bare-react-native-projects).

</ConfigReactNative>

## Usage

> **warning** Only one Camera preview can be active at any given time. If you have multiple screens in your app, you should unmount `Camera` components whenever a screen is unfocused.

```jsx
import { CameraView, useCameraPermissions } from 'expo-camera/next';
import { useState } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App() {
  const [facing, setFacing] = useState('back');
  const [permission, requestPermission] = useCameraPermissions();

  if (!permission) {
    // Camera permissions are still loading
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: 'center' }}>We need your permission to show the camera</Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
  }

  function toggleCameraFacing() {
    setFacing(current => (current === 'back' ? 'front' : 'back'));
  }

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} facing={facing}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={toggleCameraFacing}>
            <Text style={styles.text}>Flip Camera</Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'transparent',
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
});
```

## Web support

Most browsers support a version of web camera functionality, you can check out the [web camera browser support here](https://caniuse.com/#feat=stream). Image URIs are always returned as base64 strings because local file system paths are unavailable in the browser.

### Chrome `iframe` usage

When using **Chrome versions 64+**, if you try to use a web camera in a cross-origin iframe nothing will render. To add support for cameras in your iframe simply add the attribute `allow="microphone; camera;"` to the iframe element:

```html
<iframe src="..." allow="microphone; camera;">
  <!-- <CameraView /> -->
</iframe>
```

## API

```js
import { CameraView } from 'expo-camera/next';
```

<APISection packageName="expo-camera-next" apiName="Camera" exposeAllClassPropsInSidebar />

## Permissions

### Android

This package automatically adds the `CAMERA` permission to your app. If you want to record videos with audio, you have to include the `RECORD_AUDIO` in your **app.json** inside the [`expo.android.permissions`](/versions/latest/config/app/#permissions) array.

<AndroidPermissions permissions={['CAMERA', 'RECORD_AUDIO']} />

### iOS

The following usage description keys are used by this library:

<IOSPermissions permissions={['NSCameraUsageDescription', 'NSMicrophoneUsageDescription']} />
